<template>
  <a-list
    :locale="locale"
    item-layout="vertical"
    size="large"
    :data-source="listData"
  >
    <template #renderItem="{ item }">
      <a-list-item key="item.title">
        <!-- 小图标展示 -->
        <template #actions>
          <span>
            <StarOutlined style="color: #E6A23C;"/>
            {{ item.collectNum }}
          </span>
          <span>
            <MessageOutlined style="color: #409EFF;"/>
            {{ item.commentNum }}
          </span>
        </template>
        <!-- 最右侧图片 -->
        <template #extra>
          <img
            width="100"
            alt="logo"
            :src="item.image"
            style="border-radius: 10px"
          />
        </template>
        <a-list-item-meta>
          <template #title>
            <router-link to="" @click="toShop(item.key)">
              <h3 style="font-weight: bold">
                {{ item.homeName }}
              </h3>
            </router-link>
          </template>
          <template #avatar
            ><a-avatar size="large" :src="item.avatar"
          /></template>
        </a-list-item-meta>
        <span style="font-weight: 550; font-size: 16px">
            {{ item.remark }}
          </span>
      </a-list-item>
    </template>
  </a-list>
  <!-- 分页 -->
  <div
    style="
      height: 40px;
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: center;
    "
  >
    <a-pagination
      v-model:current="pageNo"
      v-model:page-size="pageSize"
      :total="total"
      @change="handlePageChange"
    />
  </div>
</template>
<script setup>
import { StarOutlined, MessageOutlined } from '@ant-design/icons-vue';
import { ref, onMounted } from 'vue';
import router from "@/router";
import { findPerimeterStores } from "@/api/store";

const pageNo = ref(1);
const pageSize = ref(4);
const total = ref(0);
const listData = ref([]);
onMounted(() => {
  getPerimeterStores();
})

function getPerimeterStores() {
  findPerimeterStores(pageNo.value, pageSize.value).then(res => {
    if (res.code === 200 && res.data !== null) {
      listData.value = res.data.data;
      total.value = res.data.total;
    }
  })
}

//监听分页变化
function handlePageChange(param1, param2) {
  pageNo.value = param1;
  pageSize.value = param2;
  getPerimeterStores();
}

function toShop(storeId) {
  router.push({ name: "Shop", query: { id: storeId } });
}
</script>

<style scoped>
a:hover{
  color: coral;
}
</style>